<template>
<div class="log">
      <div class="login-form">
        <div class="g-form">
          <div class="g-form-line">
            <span class="g-form-label"></span>
            <div class="g-form-input">
              <h1 class="title">用户登录</h1>
            </div>
          </div>
          <div style="height: 20px; width: 100%; clear: left;">
          </div>
          <div class="g-form-line">
            <span class="g-form-label"></span>
            <div class="g-form-input">
              <div class="ipt">
                <div class="lab">
                  用户名:
                </div>
                <input type="text" placeholder="请输入用户名" name="username" v-model="username">
              </div>
            </div>
          </div>
          <div style="height: 20px; width: 100%; clear: left;">
          </div>
          <div class="g-form-line">
            <span class="g-form-label"></span>
            <div class="g-form-input">
              <div class="ipt">
                <div class="lab">
                  密码:
                </div>
                <input type="password" placeholder="请输入密码" name="password" v-model="password">
              </div>
            </div>
          </div>
          <div style="height: 20px; width: 100%; clear: left;">
          </div>

          <div class="g-form-line">
            <div class="g-form-btn">
              <div class="ipt">
                <button class="btn" @click="log">登录</button>
              </div>
            </div>
          </div>
        </div>
      </div>


</div>
</template>

<script>
export default {
  props: {

  },
  watch:{
  
  },
  data () {
    return {
      username:'',
      password:''
    }
  },
  methods: {
    closeMyself (data) {
        this.$emit('log-dialog', data)
    },
    log(){
      var that=this;
        this.$http.post("http://123.56.86.203/login",
          {
            userinfo:{
              username:this.username,
              password:this.password,
            }
          },
          {emulateJSON:true}
        ).then(response=>{
            if(response.body.status == 0){
                alert('登录成功');
                this.closeMyself(response.body.info);
            }else{
              alert(response.body.info);
            }
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.title{
  width: 100%;
  text-align: center;
  font:bold 25px/40px '\5FAE\8F6F\96C5\9ED1';
  color:#1E9FFF;
}
.ipt{
  width: 60%;
  margin-left: 20%;
  float: left;
}
.error_info{
  width: 60%;
  margin-left: 20%;
  float: left;
  text-align: center;
  font:18px/25px '\4EFF\5B8B';
  margin-top: 10px;
}
.red{
  color:red;
}
.ipt .lab{
  float:left;
  font:18px/30px '\5FAE\8F6F\96C5\9ED1';
  color:#666;
  width: 27%;
  margin-right: 1%;
  text-align: center;
}
.ipt input{
  float: left;
  height: 28px;
  width: 70%;
}

button{
  float: right;
  height: 32px;
  width:32%;
  text-align: center;
  font-size: 12px
}
.ipt .btn{
  float: none;
  width:90%;
  margin-left: 6%;
  height: 40px;
  font:22px/40px '\5FAE\8F6F\96C5\9ED1';
  color:white;
  background-color: #1E9FFF;
  border: 1px solid #1E9FFF;
}
</style>
